<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>处方检查结果页面 - WebChannel调用示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .header {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
        .result-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .problem-item {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }
        .warning-level {
            font-weight: bold;
            color: #e17055;
        }
        .buttons {
            text-align: center;
            margin-top: 30px;
        }
        .btn {
            padding: 10px 20px;
            margin: 0 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        .btn-primary {
            background: #007bff;
            color: white;
        }
        .btn-secondary {
            background: #6c757d;
            color: white;
        }
        .btn-danger {
            background: #dc3545;
            color: white;
        }
        .btn-success {
            background: #28a745;
            color: white;
        }
        .btn:hover {
            opacity: 0.8;
        }
        .code-section {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            margin: 20px 0;
            font-family: 'Courier New', monospace;
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            text-align: center;
        }
        .status.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .status.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>合理用药实时审核Web端</h1>
            <p>WebChannel调用Qt函数示例</p>
        </div>

        <div class="result-section">
            <h3>WebChannel测试</h3>
            <p>在下方文本框中输入数据，点击按钮触发Qt函数</p>
            
            <div style="margin: 20px 0;">
                <label for="dataInput" style="display: block; margin-bottom: 10px; font-weight: bold;">数据内容：</label>
                <textarea id="dataInput" rows="4" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-family: monospace;" placeholder="请输入要传递给Qt的数据，例如：&#10;{&#10;  &quot;action&quot;: &quot;test&quot;,&#10;  &quot;message&quot;: &quot;测试数据&quot;,&#10;  &quot;timestamp&quot;: &quot;2024-01-01T12:00:00.000Z&quot;&#10;}">{"action":"test","message":"测试数据","timestamp":"2024-01-01T12:00:00.000Z"}</textarea>
            </div>
            
            <div style="text-align: center;">
                <button class="btn btn-primary" onclick="triggerData()">触发数据回调</button>
            </div>
        </div>

        <div class="result-section">
            <h3>OpenUrl 测试</h3>
            <p>测试在默认浏览器中打开URL</p>
            
            <div style="margin: 20px 0;">
                <label for="urlInput" style="display: block; margin-bottom: 10px; font-weight: bold;">URL地址：</label>
                <input type="text" id="urlInput" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;" placeholder="请输入URL，例如：https://www.baidu.com" value="https://www.baidu.com">
            </div>
            
            <div style="text-align: center;">
                <button class="btn btn-success" onclick="openUrlInBrowser()">打开URL</button>
                <button class="btn btn-success" onclick="openBaidu()">打开百度</button>
                <button class="btn btn-success" onclick="openGoogle()">打开Google</button>
            </div>
        </div>

        <div id="status" class="status" style="display: none;"></div>

        <div class="code-section">
            <h4>WebChannel调用示例代码：</h4>
            <pre><code>// 1. 等待WebChannel加载完成
new QWebChannel(qt.webChannelTransport, function (channel) {
    window.qtObject = channel.objects.qtObject;
    console.log('WebChannel已连接，Qt对象可用');
});

// 2. 调用 CheckProbleNotify 函数
function triggerData() {
    const dataInput = document.getElementById('dataInput');
    let data = dataInput.value.trim();
    
    if (!data) {
        data = JSON.stringify({
            action: 'web_triggered',
            message: '从Web页面触发的数据',
            timestamp: new Date().toISOString()
        });
    }
    
    if (window.qtObject) {
        window.qtObject.CheckProbleNotify(data);
        showStatus('数据回调已触发', 'success');
    } else {
        showStatus('Qt对象未就绪', 'error');
    }
}

// 3. 调用 OpenUrl 函数（新增）
function openBaidu() {
    if (window.qtObject) {
        // 在默认浏览器中打开百度
        window.qtObject.OpenUrl('https://www.baidu.com');
        showStatus('已调用 OpenUrl 打开百度', 'success');
    } else {
        showStatus('Qt对象未就绪', 'error');
    }
}</code></pre>
        </div>
    </div>

    <!-- 引入qwebchannel.js -->
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
    
    <script>
        let qtObject = null;
        
        // 等待WebChannel加载完成
        new QWebChannel(qt.webChannelTransport, function (channel) {
            qtObject = channel.objects.qtObject;
            console.log('WebChannel已连接，Qt对象可用');
            showStatus('WebChannel连接成功，可以调用Qt函数', 'success');
        });

        // 显示状态信息
        function showStatus(message, type) {
            const statusDiv = document.getElementById('status');
            statusDiv.textContent = message;
            statusDiv.className = 'status ' + type;
            statusDiv.style.display = 'block';
            
            // 3秒后隐藏
            setTimeout(() => {
                statusDiv.style.display = 'none';
            }, 3000);
        }

        // 触发数据回调
        function triggerData() {
            console.log('用户点击触发数据回调');
            
            // 获取文本框中的数据
            const dataInput = document.getElementById('dataInput');
            let data = dataInput.value.trim();
            
            // 如果文本框为空，使用默认数据
            if (!data) {
                data = JSON.stringify({
                    action: 'web_triggered',
                    message: '从Web页面触发的数据',
                    timestamp: new Date().toISOString(),
                    userAction: 'manual_trigger'
                });
            } else {
                // 尝试解析JSON，如果失败则包装为字符串
                try {
                    JSON.parse(data);
                } catch (e) {
                    data = JSON.stringify({
                        action: 'web_triggered',
                        message: data,
                        timestamp: new Date().toISOString(),
                        userAction: 'manual_trigger'
                    });
                }
            }
            
            callQtFunction('CheckProbleNotify', data, '数据回调已触发');
        }

        // 调用Qt函数的通用方法
        function callQtFunction(functionName, data, successMessage) {
            if (qtObject) {
                try {
                    qtObject.CheckProbleNotify(data);
                    showStatus(successMessage, 'success');
                } catch (error) {
                    console.error('调用Qt函数失败:', error);
                    showStatus('调用Qt函数失败: ' + error.message, 'error');
                }
            } else {
                showStatus('Qt对象未就绪，请等待WebChannel连接', 'error');
            }
        }

        // 页面加载完成后的处理
        window.addEventListener('load', function() {
            console.log('处方检查结果页面已加载');
            showStatus('页面加载完成，WebChannel已就绪', 'success');
        });

        // 打开用户输入的URL
        function openUrlInBrowser() {
            console.log('用户点击打开URL按钮');
            
            const urlInput = document.getElementById('urlInput');
            let url = urlInput.value.trim();
            
            if (!url) {
                showStatus('URL为空，请输入有效的URL', 'error');
                return;
            }
            
            // 确保URL有协议
            if (!url.startsWith('http://') && !url.startsWith('https://')) {
                url = 'https://' + url;
            }
            
            if (qtObject) {
                try {
                    qtObject.OpenUrl(url);
                    showStatus('已调用 OpenUrlInBrowser，URL: ' + url, 'success');
                    console.log('成功调用 OpenUrlInBrowser，URL:', url);
                } catch (error) {
                    console.error('调用 OpenUrl 失败:', error);
                    showStatus('调用失败: ' + error.message, 'error');
                }
            } else {
                showStatus('Qt对象未就绪，请等待WebChannel连接', 'error');
            }
        }

        // 打开百度
        function openBaidu() {
            console.log('用户点击打开百度');
            
            if (qtObject) {
                try {
                    qtObject.OpenUrl('https://www.baidu.com');
                    showStatus('已调用 OpenUrl 打开百度', 'success');
                    console.log('成功调用 OpenUrl 打开百度');
                } catch (error) {
                    console.error('调用 OpenUrl 失败:', error);
                    showStatus('调用失败: ' + error.message, 'error');
                }
            } else {
                showStatus('Qt对象未就绪，请等待WebChannel连接', 'error');
            }
        }

        // 打开Google
        function openGoogle() {
            console.log('用户点击打开Google');
            
            if (qtObject) {
                try {
                    qtObject.OpenUrl('https://www.google.com');
                    showStatus('已调用 OpenUrl 打开Google', 'success');
                    console.log('成功调用 OpenUrl 打开Google');
                } catch (error) {
                    console.error('调用 OpenUrl 失败:', error);
                    showStatus('调用失败: ' + error.message, 'error');
                }
            } else {
                showStatus('Qt对象未就绪，请等待WebChannel连接', 'error');
            }
        }

        // 页面卸载时的处理
        window.addEventListener('beforeunload', function() {
            console.log('页面即将卸载');
            // 不主动调用Qt函数，让用户手动操作
        });
    </script>
</body>
</html>
